<template>
  <Layout>
    <div class="project">
      <div class="container">
        <div class="project-header">
          <h1 class="project-title">{{ project.title }}</h1>
          <div class="project-info">
            <div class="categories-container">
              <div class="categories">
                <span class="label">Categories</span>
                <span v-for="c in project.categories" :key="c.id" class="category">{{ c.title }}</span>
              </div>
            </div>
            
            <div class="year-container">
              <span class="label">Time</span>
              <div>{{ project.created_at.slice(0, 10) }}</div>
            </div>
            
          </div>
        </div>
        
        <div class="content" v-html="mdToHtml(project.content)">
        </div>
      </div>
    </div>
  </Layout>
</template>
<page-query>
query($id: ID!){
  strapiProjects(id: $id) {
    id
    title
    content
    created_at
    categories {
      id
      title
    }
  }
}
</page-query>
<script>
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt()

export default {
  name: 'projectPage',
  computed: {
    project() {
      return this.$page.strapiProjects
    }
  },
  methods: {
    mdToHtml(str) {
      str = str.replaceAll('(/uploads/', `(${this.GRIDSOME_API_URL}/uploads/`)
      return md.render(str)
    }
  }
}
</script>
<style scoped>
.project-header {
    padding: 20vh 0 4rem
}
.project-title {
    font-size: 4rem;
    margin: 0 0 4rem;
    padding: 0
}
.project-info {
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem
}
.project-info div {
    margin-right: 4rem
}
.project-info>div:last-of-type {
    margin: 0
}
.category:after {
    content: ", "
}
.category:last-of-type:after {
    content: ""
}
</style>
